import React, { Component } from 'react';
import './App.css';

const componentsData = [
  {
    id: 1,
    type: 'Button',
    props: {
      buttonText: 'Click Me',
      backgroundColor: 'blue',
      color: 'white'
    }
  },
  {
    id: 2,
    type: 'Input',
    props: {
      placeholder: 'Enter text...',
      value: '',
    }
  },
  {
    id: 3,
    type: 'Image',
    props: {
      src: '',
      alt: 'Image'
    }
  }
];

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedComponent: null,
      components: componentsData,
      selectedComponentProps: {},
      createList:[]
    };
  }

  handleComponentClick = componentId => {
    const { components } = this.state;
    const selectedComponent = components.find(
      component => component.id === componentId
    );
    this.setState({
      selectedComponent,
      selectedComponentProps: selectedComponent.props || {}
    });
  };

  handlePropChange = e => {
    const propKey = e.target.name;
    const propValue = e.target.value;
    this.setState(prevState => ({
      selectedComponentProps: {
        ...prevState.selectedComponentProps,
        [propKey]: propValue
      }
    }));
  };

  handlePropsSubmit = () => {
    const { selectedComponent, components, selectedComponentProps,createList } = this.state;
    const updatedComponents = components.map(component =>
      component === selectedComponent
        ? { ...component, props: selectedComponentProps }
        : component
    );
    this.setState({
      components: updatedComponents
    },()=>{
        console.log(components);
    });

    var root1 = React.createElement('img', {  src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' })
    var root2 = React.createElement('input', { defaultValue:"测试",type:"text" })

    this.setState({
        createList:[...this.state.createList,root1,root2]
    })
  };

  renderPage = () => {
    const { components } = this.state;
    return (
      <div className="page">
        {components.map(component => (
          <div
            key={component.id}
            className={`component ${
              this.isSelectedComponent(component) ? 'selected' : ''
            }`}
            onClick={() => this.handleComponentClick(component.id)}
          >
            {component.type}
          </div>
        ))}
      </div>
    );
  };

  renderPropsForm = () => {
    const { selectedComponent, selectedComponentProps } = this.state;
    if (!selectedComponent) return null;
    return (
      <div className="props-form">
        <h2>Props:</h2>
        {Object.entries(selectedComponentProps).map(([key, value]) => (
          <div key={key}>
            <label>{key}:</label>
            <input
              name={key}
              value={value}
              onChange={this.handlePropChange}
              disabled={!selectedComponent}
            />
          </div>
        ))}
        <button onClick={this.handlePropsSubmit}>Submit</button>
      </div>
    );
  };
  show = ()=>{
    var root2 = React.createElement('img', {  src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',style:{ width:"100px"} })
    return root2
  }

  isSelectedComponent = component => {
    const { selectedComponent } = this.state;
    return selectedComponent === component;
  };

  render() {
    return (
      <div className="app">
        <h1>Low Code Platform</h1>
        <div className="sidebar">
          <h2>Components:</h2>
          {this.state.components.map(component => (
            <div
              key={component.id}
              className={`component ${
                this.isSelectedComponent(component) ? 'selected' : ''
              }`}
              onClick={() => this.handleComponentClick(component.id)}
            >
              {component.type}
            </div>
          ))}
        </div>
        <div className="content">
          {this.renderPage()}
          {this.renderPropsForm()}
          {this.state.createList}
        </div>
      </div>
    );
  }
}

export default Main;